<template>
	<view>
		<view class="top-bg"></view>
		<view class="content-wrap">
			<view class="list-wrap">
				<view class="clock-user-info">
					<view class="user-name">
						{{formData.name}}
					</view>
					<view class="info-item yf-flex-left">
						<view class="info-item-title">性别：</view>
						<view class="info-item-content">{{formData.userInfoDto.gender||""}}</view>
					</view>
					<view class="info-item yf-flex-left">
						<view class="info-item-title">单位：</view>
						<view class="info-item-content">{{formData.userInfoDto.company||""}}</view>
					</view>
					<view class="info-item yf-flex-left">
						<view class="info-item-title">部门：</view>
						<view class="info-item-content">{{formData.userInfoDto.deptName||""}}</view>
					</view>
					<view class="info-item yf-flex-left">
						<view class="info-item-title">联系电话：</view>
						<view class="info-item-content">{{formData.userInfoDto.phone||""}}</view>
					</view>
					<view class="info-item yf-flex-left">
						<view class="info-item-title">所在地：</view>
						<view class="info-item-content">{{formData.userInfoDto.address||""}}</view>
					</view>
					<view class="info-item yf-flex-left">
						<view class="info-item-title">身份证号码：</view>
						<view class="info-item-content">{{formData.userInfoDto.idCard||""}}</view>
					</view>
				</view>
				<m-history :userId="formData.userInfoDto.userId" ref="history" :address="formData.address"></m-history>
			</view>
		</view>
	</view>
</template>

<script>
	import mHistory from "@/components/hq-ui/m-history"
	export default {
		components: {
			mHistory
		},
		data() {
			return {
				formData: {}
			};
		},
		onLoad(options) {
			this.formData = JSON.parse(decodeURIComponent(options.info));
			this.$nextTick(()=>{
				this.$refs.history.loadList();
			}) 
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	page {
		background: #F4F8FB;
	}

	.top-bg {
		background: #3291F8;
		width: 100%;
		height: 200rpx;
		position: fixed;
		top: 0;
		left: 0;
	}

	.content-wrap {
		padding: 0 30rpx 30rpx;
		margin-top: 60rpx;
		width: 100%;
		z-index: 2;
		position: relative;
		.list-wrap {
			border-radius: 20rpx;
			background: #fff;
			padding: 24rpx;
			box-shadow: 0px 2rpx 6rpx 0px rgba(180, 180, 180, 40);

			.clock-user-info {
				margin-bottom: 88rpx;

				.user-name {
					font-size: 12+30rpx;
					color: #101010;
					font-weight: bold;
					line-height: 76rpx;
				}

				.info-item {
					height: 46rpx;

					.info-item-title {
						font-size: 12+24rpx;
						color: #000000;
						width: 236rpx;
					}

					.info-item-content {
						font-size: 12+24rpx;
						color: #797979;
						flex: 1;
					}
				}
			}
		}
	}
</style>